<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script src="node_mondules/browser.min.js"></script>-->
    <script src="../script/jquery-1.10.min.js"></script>
</head>
<script type="module">
    import {consoleprint} from "./modules/first.js"
    consoleprint("创建class")
    class First{
        constructor(...args){
            this.name = args[0]
            this.age = args[1]
        }
        showName(){
            return this.name
        }
        showAge(){
            return this.age
        }
        ["aaa"+"bbb"](){ //方法名可以 用变量
            return `class name ${this.name}${this.age}`
        }
    }
    let c1 = new First(...["aa",18]) // todo new方法创建函数
    console.log(`class First name: ${c1.name},Age:${c1.showAge()}`)
    console.log(c1["aaa"+"bbb"]());//todo 方法名可以 用变量

    // todo
    consoleprint("class 中方法 解构后使用")

    class First1{
        constructor(...args){
            this.name = args[0]
            this.age = args[1];
            // todo 将方法缩写在 类上，解构后 可以使用
            this.showName = this.showName.bind(this);
        }
        showName(){

            return this.name
        }
        showAge(){
            return this.age
        }
        ["aaa"+"bbb"](){ //方法名可以 用变量
            return `class name ${this.name}${this.age}`
        }
    }

    let c2 = new First1(...["First1",19]) // todo new方法创建函数
    let {showName} = c2
    console.log(showName())


    // todo
    consoleprint("class 中setattr ,getattr")

    class First2{
        constructor(element) {
            this.element = element;
        }
        get html() {
            return this.element.html() // jquery 方法
        }
        set html(value) { // 不能直接放在 this.html上
            this.element.html(value)
        }
    }

    let c3 = new First2($("div")); // todo new方法创建函数
    c3.html = `<h1>haha</h1>`
    console.log(c3.html)

    // todo
    consoleprint("class 中静态方法")

    class First3{
        constructor(...args){
            this.name = args[0]
            this.age = args[1];
            // todo 将方法缩写在 类上，解构后 可以使用
            this.showName = this.showName.bind(this);
        }
        showName(){

            return this.name
        }
        showAge(){
            return this.age
        }
        static sName(){
            return "this is static"
        }
        ["aaa"+"bbb"](){ //方法名可以 用变量
            return `class name ${this.name}${this.age}`
        }
    }

    let c4 = new First3(...["First3",19]) // todo new方法创建函数
    console.log(c4.showName());
    // console.log(c4.sName()) todo 不属于实例后的方法
    console.log(First3.sName())
    // console.log(First3.showName()) todo 不实例，也没有实例方法


    // todo
    consoleprint("class 继承")

    class Father{
        constructor(...args){
            this.name = args[0]
            this.age = args[1];
        }
        showName(){
            return this.name
        }
        showAge(){
            return this.age
        }
        static sName(){
            return "this is static"
        }

    }

    class Son extends Father{
        constructor(...args){
            super(...args) // 继承调用父类的构造函数,传入参数
            this.sex= args[2];// 子类的属性
        }
        showSex(){
            return `this is sex:${this.sex}`
        }
        showName(){ // 与父类一样的方法
            super.showName() // 不调用 父类方法 则覆盖父类的方法
            return "this is Son showName"

        }
    }
    let c5 = new Son(...["SonName",19,'man']); // todo new方法创建函数
    console.log(`class Son Sex:${c5.sex}`);
    console.log(`class Son extend Father var Name:${c5.name}`)
    console.log(`class Son extend Father var Age:${c5.showAge()}`)

    console.log(`调用父类静态方法:${Son.sName()}`); // todo 可以继承静态方法
    console.log(`调用父类已经存在的方法:${c5.showName()}`)

    // todo
    consoleprint("class 外部js文件加载 ");
    import {FF1 } from "./modules/class1.js"

    let c6 = new FF1(...["FF1",19,'man']); // todo new方法创建函数
    console.log(`this is class FF1 Name: ${c6.showName()}`)

</script>
<body>
<div id="div1"></div>
</body>
</html>